<template>
  <header class="top-bar">
    <div class="title-block">
      <h1>油技（塘沽）·视频AI分析平台</h1>
      <p>智慧安监 · 实时联动 · 多维可视化</p>
    </div>
    <div class="status-center">
      <!-- <div class="status-item">
        <span class="label">系统状态</span>
        <span class="value online">在线</span>
      </div>
      <div class="status-item">
        <span class="label">平台版本</span>
        <span class="value">V2.0.0</span>
      </div> -->
      <div class="status-item">
        <span class="label">视图模式</span>
        <button class="mode-toggle" @click="toggleViewMode">
          <span :class="{ active: viewMode === 'standard' }">标准</span>
          <span :class="{ active: viewMode === 'simple' }">简洁</span>
        </button>
      </div>
      <div class="alert-buttons">
        <button class="alert-btn fire-alert" @click="triggerFireAlert">火灾预警</button>
        <button class="alert-btn radiation-alert" @click="triggerRadiationAlert">放射源预警</button>
      </div>
      <div class="config-button">
        <button class="config-btn" @click="openConfig" title="算法灵敏度配置">
          <span class="config-icon">⚙️</span>
          <span>算法配置</span>
        </button>
      </div>
    </div>
    <div class="info-block">
      <div class="clock">
        <span class="date">{{ dateText }}</span>
        <span class="time">{{ timeText }}</span>
      </div>
      <div class="meta">
        <span>管理员：系统内置账号</span>
        <span>最后刷新：{{ refreshText }}</span>
      </div>
    </div>
  </header>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useNow, useDateFormat } from '@vueuse/core'

const now = useNow({ interval: 1000 })

const dateText = useDateFormat(now, 'YYYY年MM月DD日 dddd')
const timeText = useDateFormat(now, 'HH:mm:ss')

const refreshText = computed(() => useDateFormat(now, 'YYYY-MM-DD HH:mm:ss').value)

const viewMode = ref('standard')
const emit = defineEmits(['alert', 'open-config'])

const toggleViewMode = () => {
  viewMode.value = viewMode.value === 'standard' ? 'simple' : 'standard'
}

const triggerFireAlert = () => {
  emit('alert', { type: 'fire', message: '火灾预警' })
}

const triggerRadiationAlert = () => {
  emit('alert', { type: 'radiation', message: '放射源预警' })
}

const openConfig = () => {
  emit('open-config')
}

defineExpose({
  viewMode: computed(() => viewMode.value),
  toggleViewMode
})
</script>

<style scoped>
.top-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid rgba(25, 161, 255, 0.35);
  background: radial-gradient(circle at top, rgba(9, 75, 126, 0.85), rgba(2, 26, 48, 0.9));
  box-shadow: 0 8px 24px rgba(0, 99, 168, 0.35);
  border-radius: 12px;
  gap: 20px;
}

.title-block h1 {
  margin: 0;
  font-size: 20px;
  letter-spacing: 1px;
  color: #ecf8ff;
  text-shadow: 0 0 15px rgba(90, 231, 255, 0.6);
}

.title-block p {
  margin: 2px 0 0;
  font-size: 12px;
  color: rgba(187, 235, 255, 0.75);
}

.status-center {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(63, 180, 255, 0.35);
  background: rgba(6, 47, 86, 0.55);
}

.label {
  font-size: 13px;
  color: rgba(176, 226, 255, 0.75);
}

.value {
  font-size: 16px;
  font-weight: 600;
  color: #52e0ff;
}

.value.online {
  color: #31ffa1;
}

.mode-toggle {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(63, 180, 255, 0.35);
}

.mode-toggle span {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(176, 226, 255, 0.6);
  background: rgba(6, 47, 86, 0.3);
  transition: all 0.3s ease;
}

.mode-toggle span.active {
  color: #52e0ff;
  background: rgba(6, 47, 86, 0.8);
  box-shadow: inset 0 0 8px rgba(82, 224, 255, 0.3);
}

.alert-buttons {
  display: flex;
  gap: 10px;
  align-items: center;
}

.alert-btn {
  padding: 6px 14px;
  border: 1px solid rgba(255, 63, 63, 0.6);
  border-radius: 6px;
  background: rgba(200, 50, 50, 0.3);
  color: #ff6b6b;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.alert-btn:hover {
  background: rgba(200, 50, 50, 0.5);
  border-color: rgba(255, 63, 63, 0.8);
  box-shadow: 0 0 12px rgba(255, 63, 63, 0.4);
  transform: translateY(-1px);
}

.alert-btn:active {
  transform: translateY(0);
}

.alert-btn.fire-alert {
  border-color: rgba(255, 100, 50, 0.6);
  background: rgba(255, 80, 40, 0.25);
  color: #ff8844;
}

.alert-btn.radiation-alert {
  border-color: rgba(255, 200, 0, 0.6);
  background: rgba(255, 180, 0, 0.25);
  color: #ffcc00;
}

.config-button {
  display: flex;
  align-items: center;
}

.config-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid rgba(82, 224, 255, 0.4);
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(82, 224, 255, 0.15), rgba(0, 136, 255, 0.15));
  color: #52e0ff;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.config-btn:hover {
  background: linear-gradient(135deg, rgba(82, 224, 255, 0.3), rgba(0, 136, 255, 0.3));
  border-color: rgba(82, 224, 255, 0.6);
  box-shadow: 0 0 12px rgba(82, 224, 255, 0.4);
  transform: translateY(-1px);
}

.config-btn:active {
  transform: translateY(0);
}

.config-icon {
  font-size: 14px;
  filter: drop-shadow(0 0 4px rgba(82, 224, 255, 0.6));
}

.info-block {
  display: grid;
  gap: 8px;
  justify-items: end;
}

.clock {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.date {
  font-size: 14px;
  color: rgba(197, 235, 255, 0.85);
}

.time {
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 0 15px rgba(0, 168, 255, 0.85);
}

.meta {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: rgba(183, 219, 255, 0.7);
}
</style>

